<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>北仑区保障性用房数据驾驶舱</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/house.css">
  <link rel="stylesheet" href="css/cockpit.css">
  <link rel="stylesheet" href="css/left.css">
  <link rel="stylesheet" href="css/middle.css">
  <link rel="stylesheet" href="css/right.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="js/ajaxSet.js"></script>
  <script src="js/lib/jquery.min.js"></script>
</head>
<body>
  <div id="container" style="background:black">
    <div class="loading" id="loadingBox"><span></span><span></span><span></span><span></span><span></span></div>

    <div class="screen-container-wrapper container-box-left">
      <div class="left-box0" id="Date"></div>
      <div class="left-box1">
        <header class="screen-sub-title">保障房源分类统计<span>套(间)</span></header>
          <ul class="left-box1-inner">
            <li>
              <h1><i class="anzhi"></i><b class="weight">82</b></h1>
              <p>安置房(限价房)</p>
              <div class="box1-tips">
                <h3>82套</h3>
                <h5>安置房：42 套</h5>
                <h5>限价房：40 套</h5>
              </div>
            </li>
            <li>
              <h1><i class="gongzu"></i><b class="weight">730</b></h1>
              <p>公(廉)租房</p>
              <div class="box1-tips">
                <h3>82套</h3>
                <h5>公租房：42 套</h5>
                <h5>廉租房：40 套</h5>
              </div>
            </li>
            <li>
              <h1><i class="rencai"></i><b class="weight">730</b></h1>
              <p>人才房</p>
              <div class="box1-tips">
                <h3>82套</h3>
                <h5>人才房：40 套</h5>
              </div>
            </li>
            <li>
              <h1><i class="lianzu"></i><b class="weight">730</b></h1>
              <p>保障性租赁住房</p>
              <div class="box1-tips">
                <h3>82套</h3>
                <h5>保障性租赁住房：42 套</h5>
              </div>
            </li>
            <li>
              <h1><i class="qita"></i><b class="weight">730</b></h1>
              <p>共有产权房</p>
              <div class="box1-tips">
                <h3>730套</h3>
                <h5>共有产权房：42 套</h5>
              </div>
            </li>
          </ul>
      </div>

      <div class="left-box2" style="margin-top: -18px">
        <header class="screen-sub-title1">
          <p>配租统计</p>
          <div class="left-box2-title-right">
            <b class="txt1">总出租</b><strong class="weight">0</strong><small>套</small>
            <b class="txt1">总出租率</b><strong class="weight">0</strong><small>%</small>
          </div>
        </header>
        <ul class="left-box2-inner">
          <li>
            <h1><b><span>安置房(限价房)</span> <strong>180</strong><small>套</small></b> <b><span class="white">57.2</span><small>%</small></b></h1>
            <div class="staff-progress-bar">
              <div class="staff-progress-bg"></div>
              <div class="staff-progress anzhi" style="width:57%"></div>
            </div>
            <div class="box2-tips">
              <h3>360套</h3>
              <h5>安置房: 180套</h5>
              <h5>限价房: 180套</h5>
            </div>
          </li>
          <li>
            <h1><b><span>公(廉)租房</span> <strong>180</strong><small>套</small></b> <b><span class="white">57.2</span><small>%</small></b></h1>
            <div class="staff-progress-bar">
              <div class="staff-progress-bg"></div>
              <div class="staff-progress gongzu" style="width:57%"></div>
            </div>
            <div class="box2-tips">
              <h3>82套</h3>
              <h5>公租房：42 套</h5>
              <h5>廉租房：40 套</h5>
            </div>
          </li>
          <li>
            <h1><b><span>人才房</span> <strong>180</strong><small>套</small></b> <b><span class="white">57.2</span><small>%</small></b></h1>
            <div class="staff-progress-bar">
              <div class="staff-progress-bg"></div>
              <div class="staff-progress xianjia" style="width:57%"></div>
            </div>
            <div class="box2-tips">
              <h3>82套</h3>
              <h5>人才房：40 套</h5>
            </div>
          </li>
          <li>
            <h1><b><span>保障性租赁住房</span> <strong>180</strong><small>套</small></b><b><span class="white">57.2</span><small>%</small></b></h1>
            <div class="staff-progress-bar">
              <div class="staff-progress-bg"></div>
              <div class="staff-progress rencai" style="width:57%"></div>
            </div>
            <div class="box2-tips">
              <h3>82套</h3>
              <h5>保障性租赁住房：42 套</h5>
            </div>
          </li>
          <li>
            <h1><b><span>共有产权房</span> <strong>42</strong><small>套</small></b> <b><span class="white">9.5</span><small>%</small></b></h1>
            <div class="staff-progress-bar">
              <div class="staff-progress-bg"></div>
              <div class="staff-progress lianzu" style="width:9.5%"></div>
            </div>
            <div class="box2-tips">
              <h3>42套</h3>
              <h5>共有产权房：42 套</h5>
            </div>
          </li>
        </ul>
      </div>

      <div class="left-box3">
        <header class="screen-sub-title">租金统计</header>
        <ul class="left-box3-inner">
          <li>
            <h1><b>￥ <span class="weight">730</span> / <samll>㎡</samll></b></h1>
            <p>公(廉)租房</p>
          </li>
          <li>
            <h1><b>￥ <span class="weight">400</span> / <samll>㎡</samll></b></h1>
            <p>保障性租赁住房</p>
          </li>
          <li>
            <h1><b>￥ <span  class="weight">730</span> / <samll>㎡</samll></b></h1>
            <p>人才房</p>
          </li>
        </ul>
        <header class="screen-sub-title">售价统计</header>
        <ul class="left-box3-inner">
          <li class="double">
            <h1><b>￥ <span  class="weight">730</span> / <samll>㎡</samll></b></h1>
            <p>安置房(限价房)</p>
          </li>
          <li class="double">
            <h1><b>￥ <span  class="weight">0</span> / <samll>㎡</samll></b></h1>
            <p>共有产权房</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="screen-container-wrapper container-box-middle">
      <div class="middle-inner">
        <div class="middle-title"  style="">
          <img src="img/house_title_bg.png" width="100%"/>
          <div class="middle-title-text">北仑区保障性用房数据驾驶舱</div>
        </div>

        <div class="middle-box1">
          <dl>
            <dt><span class="title">房源总量:</span><strong  class="weight">3676</strong><b>套</b></dt>
            <dd class="middle-inner1">
              <p>已配租量: <span class="white weight">3000</span><small>套</small></p>
              <p>可配租量: <span class="white weight">210</span><small>套</small></p>
            </dd>
            <dd class="top-progress-bar">
              <div class="top-progress-bg bg-white"></div>
              <div class="top-progress bg-blue" style="width:57%"></div>
            </dd>
          </dl>
          <dl>
            <dt><span class="title">总面积:</span><strong class="weight">2100</strong><b>㎡</b></dt>
            <dd class="middle-inner1">
              <p>当前服务人数: <span class="white weight">920</span><small>人</small></p>
              <p>服务总数: <span class="white weight">920</span><small>套</small></p>
            </dd>
            <dd class="top-progress-bar">
              <div class="top-progress-bg"></div>
              <div class="top-progress bg-orange" style="width:57%"></div>
            </dd>
          </dl>
        </div>
        <div class="middle-box2">
          <div class="middle-box2-inner">
            <ul class="middle-map beilun" id="middleMap">
              <!--            <li class="daoshizhen">
                            <span>岛石镇</span>
                            <div class="map-tips">
                              <h3>岛石镇</h3>
                              <p>房间总量：80 套</p>
                              <p>已配租：34 套</p>
                              <p>服务人数：23 人</p>
                            </div>
                          </li>-->
            </ul>
            <div class="middle-light">
              <div class="middle-light-inner">
                <div class="container">
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="middle-circle-wrapper">
              <div class="middle-circle">
                <div id="middleCircleChartBox"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="middle-box3">
          <div class="middle-box3-inner">
            <header class="screen-sub-title3">服务人员统计</header>
            <div class="middle-box3-part1">
              <header class="screen-sub-title4">性别统计</header>
              <ul>
                <li class="boy-part"><b>30%</b><h1></h1></li>
                <li class="girl-part"><b>70%</b><h1 class="pink"></h1></li>
              </ul>
              <h5>
                <i class="boy"></i><b class="mr15">男性</b>
                <i class="girl pink"></i><b>女性</b>
              </h5>
            </div>
            <div class="middle-box3-part2">
              <header class="screen-sub-title4">年龄统计</header>
              <div class="age-progress-bar">
                <div class="age-progress-bg"></div>
                <div class="age-progress age-cyan1 first" style="width:15%">
                  <span class="age-font">3%</span>
                </div>
                <div class="age-progress age-blue1" style="width:57%">
                  <span class="age-font">57%</span>
                </div>
                <div class="age-progress age-orange1" style="width:27%">
                  <span class="age-font">27%</span>
                </div>
                <div class="age-progress age-purple1" style="width:23%">
                  <span class="age-font">23%</span>
                </div>
              </div>
              <h5>
                <i class="age-cyan1"></i><b class="mr15">35-45周岁</b>
                <i class="age-blue1"></i><b class="mr15">25-35周岁</b>
                <i class="age-orange1"></i><b class="mr15">18-25周岁</b>
                <i class="age-purple1"></i><b class="mr15">儿童 </b>
              </h5>
            </div>
            <div class="middle-box3-part3">
              <header class="screen-sub-title4">籍贯分布Top.3</header>
              <div class="middle-box3-part3-inner">
                <dl>
                  <dt>No.1</dt>
                  <dd class="part3-info age-blue1"><span>35</span>%</dd>
                  <dd>河南</dd>
                </dl>
                <dl>
                  <dt>No.2</dt>
                  <dd class="part3-info age-orange1"><span>35</span>%</dd>
                  <dd>江苏</dd>
                </dl>
                <dl>
                  <dt>No.3</dt>
                  <dd class="part3-info age-green1"><span>35</span>%</dd>
                  <dd>广东</dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="screen-container-wrapper container-box-right">
      <div class="right-box1">
        <header class="screen-sub-title1">
          <p>项目建设情况</p>
          <div class="right-box-select">
            <div id="rightSelect1"></div>
          </div>
        </header>
        <div class="right-part1-box" id="rightPart1">
        </div>
      </div>
      <div class="right-box2">
        <header class="screen-sub-title1">
          <p>保障房年度申报统计</p>
          <div class="right-box-select">
            <div id="rightSelect2"></div>
          </div>
        </header>
        <div class="right-box-select" >
          <ul id="rightBox2" class="right-box2-part">
            <li>
              <h4 class="weight">730</h4>
              <p>项目数(个)</p>
            </li>
            <li>
              <h4 class="weight">730</h4>
              <p>房源总量(套)</p>
            </li>
            <li>
              <h4 class="weight">730</h4>
              <p>已配租(套)</p>
            </li>
            <li>
              <h4 class="weight">730</h4>
              <p>未配租(套)</p>
            </li>
          </ul>
          <button class="right-search-btn">查看房源类型</button>
        </div>
      </div>
      <div class="right-box3">
        <header class="screen-sub-title1">
          <p>房源供需分析</p>
          <div class="right-box-select">
            <button id="rightSelect3" class="right-select-btn">查看供需详情</button>
          </div>
        </header>
        <ul class="right-decorate-part">
          <li>
            <h4 class="weight">192</h4>
            <p>供应量（套）</p>
          </li>
          <li>
            <h4 class="weight">22730</h4>
            <p>需求量(套)</p>
          </li>
          <li>
            <h4 class="weight">32730</h4>
            <p>缺口量(套)</p>
          </li>
        </ul>
      </div>
      <div class="right-box4">
        <header class="screen-sub-title1">
          <p>已拆迁未安置情况统计</p>
          <div class="right-box-select">
            <button id="rightSelect4" class="right-select-btn">查看街道详情</button>
          </div>
        </header>
        <ul class="right-decorate-part">
          <li>
            <h4 class="weight">730</h4>
            <p>总数(套)</p>
          </li>
          <li>
            <h4 class="weight" number="11">11</h4>
            <p>街道数(个)</p>
          </li>
        </ul>
      </div>
    </div>

    <div class="dialog-bg" id="dialogBg"></div>
    <!--用display none 重绘时不加载该元素 所以不可用-->
    <div class="screen-container-wrapper light-dialog light-dialog1 hide" id="dialog1" style="visibility: hidden">
      <h2 class="dialog-title-box"><strong id="dialog1Title">保障房年度申报统计</strong><div class="dialog-close"></div></h2>
      <div class="dialog1-box-select"><div id="dialog1Select"></div></div>
      <div class="light-dialog-wrapper" id="dialog1Box">
      </div>
    </div>
    <div class="screen-container-wrapper light-dialog light-dialog1 hide" id="dialog2" style="visibility: hidden">
      <h2 class="dialog-title-box"><strong id="dialog2Title">房源供需分析</strong><div class="dialog-close"></div></h2>
      <div class="light-dialog-wrapper" id="dialog2Box"></div>
    </div>
    <div class="screen-container-wrapper light-dialog hide" id="dialog3" style="visibility: hidden">
      <h2 class="dialog-title-box"><strong id="dialog3Title">已拆迁未安置情况统计</strong><div class="dialog-close"></div></h2>
      <div class="light-dialog-wrapper" id="dialog3Box">
      </div>
    </div>
  </div>

  <script src="js/resize.js"></script>
  <script src="js/lib/jquery.numscroll.min.js"></script>
  <script src="js/lib/echarts.min.js"></script>
  <script src="js/nowDate.js"></script>
  <script src="js/lib/SelectBox.min.js"></script>
  <script src="js/dialog1_beilun.js"></script>
  <script src="js/dialog2_beilun.js"></script>
  <script src="js/dialog3_beilun.js"></script>
  <script src="js/right.js"></script>
  <script src="js/middleCircle1.js"></script>
  <script src="js/render.js"></script>
  <script>
    $(function () {
      $('#loadingBox').hide();
    })
  </script>
</body>
</html>